<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="https://unpkg.com/vue@next"></script>
<div id="app">
    <!-- propC 必传，不传warning   -->
    <todo-item></todo-item>
    <!-- propA类型不对warning   -->
    <todo-item :prop-a="'aaa'" :prop-c="'bbb'"></todo-item>
</div>
<script>
    const vueOpt = {
        data() {
            return {}
        }
    }

    const app = Vue.createApp(vueOpt)
    app.component('todo-item', {
        props: {
            // 基础的类型检查(null 和 undefined 会通过任何类型验证)
            propA: Number,
            // 多个可能的类型
            propB: [String, Number],
            // 必填的字符串
            propC: {
                type: String,
                required: true
            },
            // 带有默认值的对象
            propD: {
                type: Number,
                default: 100
            },
            // 带有默认值的对象
            propE: {
                type: Object,
                // 对象或数组默认值必须从一个工厂函数获取
                default: function () {
                    return {message: 'hello'}
                }
            },
            // 自定义验证函数
            propF: {
                validator: function(value){
                    // 这个值必须匹配下列字符串中的一个
                    return ['success', 'warning', 'danger'].indexOf(value) !== -1
                }
            },
            // 具有默认值的函数
            propG: {
                type: Function,
                // 与对象或数组默认值不同， 这不是一个工厂函数 --- 这是一个用作默认值的函数
                default: function () {
                    return 'Default function'
                }
            }
        },
        template: `
            <div>aaa</div>
        `
    })
    app.mount('#app')
</script>
</body>
</html>
